<template>
    <div class="mainContainer">
        <div class="flexContainer" ref="flexContainer">
            <div class="appContainer">
                <transition name="sliderRight">
                    <component :is="componentStr"></component>
                </transition>
            </div>
            <div class="fixTabBot">
                <div class="fixTab" :class="{'activ':tabNo==1}" @click="gotoTab(1)">数据大脑</div>
                <div class="fixTab" :class="{'activ':tabNo==2}" @click="gotoTab(2)">平安校园</div>
                <div class="fixTab" :class="{'activ':tabNo==3}" @click="gotoTab(3)">综合素质</div>
                <div class="contactUs" @click="isLayer=true">
                    <div class="contactUsTxt">联系我们</div>
                </div>
            </div>
        </div>

        <transition name="sliderRight">
            <div class="infoLayer" v-show="isLayer">
                <div class="contactLayer">
                    <div class="ewmImg">
                        <img :src="'../..'+buildpath+'/static/img/'+userid+'.png'">
                    </div>
                    <div class="userInfo">
                        <div class="userRow">
                            <b>联系人：</b>{{curUser.name||''}}
                        </div>
                        <div class="userRow">
                            <b>手机号：</b>{{curUser.tel||''}}
                        </div>
                    </div>
                </div>
            </div>
        </transition>
        <div class="mask" v-show="isLayer" @click="isLayer=false"></div>



    </div>
</template>

<script>
import sjdn from '@/components/sjdn.vue'
import paxy from '@/components/paxy.vue'
import zhss from '@/components/zhss.vue'
import _ from 'lodash'

import * as api from '@/api/index'

export default {
    data(){
        return{
            componentStr:'sjdn',
            tabNo:1,
            msizeFont:0,
            isLayer:false,
            userid:'',
            curUser:{},
            buildpath:process.env.NODE_ENV=='production'?'/danao':''
        }
    },
    components:{
        sjdn,paxy,zhss
    },
    activated(){
        
    },
    mounted(){
        this.userid = this.getParames('userid');
        window.document.title = '天音教育大脑';
        this.msizeFont = parseInt(getComputedStyle(window.document.documentElement)['font-size'])
        this.$refs['flexContainer'].onscroll = this.scrollFun; //IE/Opera/Chrome
        if(this.userid){
            this.getJson();
        }
    },
    methods:{
        async getJson(){
            let res = await api.getJson();
            console.log(res,"这里是json内容")
            console.log(this.userid,"this.userid")
            this.curUser = _.find(res,{tel:this.userid})
            console.log(this.curUser,"当前的用户")
        },
        gotoTab(no){
            this.tabNo = no;    
            // this.$refs.flexContainer.scrollTo(0,0)   
            if(no==1){
                this.$refs['flexContainer'].scrollTop = 0 
            }else if(no==2){
                this.$refs['flexContainer'].scrollTop = 94.2*this.msizeFont
            }else if(no==3){
                this.$refs['flexContainer'].scrollTop = 144.9*this.msizeFont
            }
        },

        scrollFun(e){
            let scrollTop = e.target.scrollTop;
            // console.log(scrollTop,"scrollTop")
            // if(scrollTop>500){
            //     this.isRocket = true;
            // }else{
            //     this.isRocket = false;
            // }
            if(scrollTop>=(94.2*this.msizeFont)&&scrollTop<(144.8*this.msizeFont)){
                this.tabNo = 2;
            }else if(scrollTop>=(144.8*this.msizeFont)){
                this.tabNo = 3;
            }else{
                this.tabNo = 1;
            }
        },
        getParames(name) {
            if(!name){
                return
            }
            var after = window.location.hash.split("?")[1];
            if(after){
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
                var r = after.match(reg);
                if (r != null) return decodeURIComponent(r[2]);
                return null;
            }
        },
    }
}
</script>

<style lang='scss' scoped>
.fixTabBot{
    width: 100%;
    height: 1.25rem;
    padding-right: 1.85rem;
    background: #FFFFFF;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 10;
    box-shadow: 0 -.02rem .08rem rgba($color: #666666, $alpha: .3);
    .fixTab{
        float: left;
        width: 33%;
        height: 1.25rem;
        line-height: 1.25rem;
        font-size: .3rem;
        color: #333333;
        text-align: center;
        position: relative;
        &.activ{
            color: #006cff;
            font-weight: bold;
        }
        &.activ::after{
            content: '\20';
            position: absolute;
            width: 50%;
            height: .07rem;
            background: #006cff;
            bottom: 10px;
            left: 25%;
        }
    }
}
.mainContainer{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.flexContainer{
    width: 100%;
    height: 100%;
    overflow: auto;;
    -webkit-overflow-scrolling: touch;
    position: relative;
}
.appContainer{
    padding-bottom: 1.2rem;
}
.contactUs{
    position: absolute;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background-color: #FFF;
    background-image: url('../assets/img/linkUs.png');
    background-repeat: no-repeat;
    background-size: 50% auto;
    background-position: center 30%;
    bottom: .35rem;
    right: .3rem;
    .contactUsTxt{
        font-size: .26rem;
        color: #FFF;
        width: 1.5rem;
        height: .46rem;
        background: #006cff;
        border-radius: .23rem;
        line-height: .46rem;
        text-align: center;
        position: absolute;
        top: 1rem;
        left: -.125rem;
    }
}
.infoLayer{
    width: 6.26rem;
    height: 7.49rem;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 550;
    margin-top: -3.745rem;
    margin-left: -3.13rem;
}
.contactLayer{
    width: 6.26rem;
    height: 7.49rem;
    padding-top: 2.2rem;
    background: url(../assets/img/tyIntro.png) no-repeat;
    background-size: 100% 100%;
    .ewmImg{
        width:2.8rem;
        height:2.8rem;
        margin: 0 auto;
        img{
            width: 100%;
            height: 100%;
        }
    }
    .userInfo{
        font-size: .34rem;
        padding-left: 1rem;
        .userRow{
            margin-top: .4rem;
        }
    }
}
</style>